<template>
	<view v-if="openModal" class="wx-modal">
		<view class="wam__mask" @touchmove.prevent="" @tap.stop="closeModal"></view>

		<!-- 内容区域 -->
		<view class="wam__wrapper">
			<!-- 关闭按钮 -->
			<view class="wam__close-btn" @tap.stop="closeModal">
				<text class="tn-icon-close"></text>
			</view>

			<view class="tn-text-center tn-text-lg">
				1024条评论
			</view>

			<view class="tn-padding-top-sm">

				<scroll-view scroll-y="true" style="max-height: 60vh;">

					<!-- 评论 -->
					<view class="tn-margin tn-padding-bottom">
						<!-- 图标logo/头像 -->
						<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xl">
							<view class="justify-content-item">
								<view class="tn-flex tn-flex-col-center tn-flex-row-left">
									<view class="logo-pic">
										<view class="logo-image">
											<view class=""
												style="background-image:url('https://img2.baidu.com/it/u=821017625,3715366885&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');width: 60rpx;height: 60rpx;background-size: cover;">
											</view>
										</view>
									</view>
									<view class="tn-padding-right tn-padding-left-sm">
										<view class="tn-padding-right tn-text-df tn-flex tn-flex-col-center">
											<view class="justify-content-item tn-text-bold">
												凶我试试
											</view>
											<!-- <view class="justify-content-item tag-user tn-color-white" style="font-size: 16rpx;">
                        <text class="">作者</text>
                      </view> -->
										</view>
										<view class="tn-padding-right tn-text-ellipsis tn-text-xs tn-color-gray"
											style="padding-top: 5rpx;">
											UE设计师
										</view>
									</view>
								</view>
							</view>
							<view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-color-gray">
								<view class="tn-text-center">
									<text class="tn-icon-more-vertical"></text>
								</view>
							</view>
						</view>

						<view class="" style="margin: 20rpx 30rpx 10rpx 80rpx;">
							说好的带我飞呢？？就这？？
						</view>
						<view class="tn-flex tn-flex-row-between" style="margin: 0rpx 0rpx 30rpx 80rpx;">
							<view class="justify-content-item tn-text-sm tn-color-gray" style="padding-top: 5rpx;">
								<text class="tn-color-gray tn-padding-right">12分钟前</text>
								<text class="tn-color-grey">回复</text>
							</view>
							<view class="justify-content-item tn-text-sm tn-color-select">
								<text class="tn-padding-xs">16</text>
								<text class="tn-icon-praise-simple-fill"></text>
							</view>
						</view>


						<view class="tn-padding-sm"
							style="margin: 20rpx 0rpx 30rpx 80rpx;border-radius: 10rpx;background-color: #A6A9CB10;">
							<view class="tn-flex tn-flex-row-between tn-flex-col-center">
								<view class="justify-content-item">
									<view class="tn-flex tn-flex-col-center tn-flex-row-left">
										<view class="logo-pic">
											<view class="logo-image-min">
												<view class=""
													style="background-image:url('https://img2.baidu.com/it/u=821017625,3715366885&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');width: 40rpx;height: 40rpx;background-size: cover;">
												</view>
											</view>
										</view>
										<view class="tn-padding-right tn-text-df tn-flex tn-flex-col-center">
											<view class="justify-content-item tn-text-bold tn-padding-left-xs">
												不许凶我吖
											</view>
											<view class="justify-content-item tag-user tn-color-white"
												style="font-size: 16rpx;">
												<text class="">作者</text>
											</view>
										</view>
									</view>
								</view>
								<view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-color-gray">
									<view class="tn-text-center">
										<text class="tn-icon-more-vertical"></text>
									</view>
								</view>
							</view>
							<view class="tn-padding-top-sm ">设计师何必难为设计师？冤冤相报何时了，不如喝杯奶茶忘了那个仔</view>

							<view class="tn-flex tn-flex-row-between tn-margin-top-xs">
								<view class="justify-content-item tn-text-xs tn-color-gray" style="padding-top: 5rpx;">
									刚刚
								</view>
								<view class="justify-content-item tn-text-xs tn-color-gray">
									<text class="tn-padding-xs">3</text>
									<text class="tn-icon-praise-simple"></text>
								</view>
							</view>
						</view>

						<!-- 评论2-->
						<!-- 图标logo/头像 -->
						<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xl">
							<view class="justify-content-item">
								<view class="tn-flex tn-flex-col-center tn-flex-row-left">
									<view class="logo-pic">
										<view class="logo-image">
											<view class=""
												style="background-image:url('https://img2.baidu.com/it/u=821017625,3715366885&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');width: 60rpx;height: 60rpx;background-size: cover;">
											</view>
										</view>
									</view>
									<view class="tn-padding-right tn-padding-left-sm">
										<view class="tn-padding-right tn-text-df tn-flex tn-flex-col-center">
											<view class="justify-content-item tn-text-bold">
												原来是猪猪吖
											</view>
											<!-- <view class="justify-content-item tag-user tn-color-white" style="font-size: 16rpx;">
                        <text class="">作者</text>
                      </view> -->
										</view>
										<view class="tn-padding-right tn-text-ellipsis tn-text-xs tn-color-gray"
											style="padding-top: 5rpx;">
											高级UI设计师
										</view>
									</view>
								</view>
							</view>
							<view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-color-gray">
								<view class="tn-text-center">
									<text class="tn-icon-more-vertical"></text>
								</view>
							</view>
						</view>

						<view class="" style="margin: 20rpx 30rpx 10rpx 80rpx;">
							求摄影师微信，谢谢
						</view>
						<view class="tn-flex tn-flex-row-between" style="margin: 0rpx 0rpx 30rpx 80rpx;">
							<view class="justify-content-item tn-text-sm tn-color-gray" style="padding-top: 5rpx;">
								<text class="tn-color-gray tn-padding-right">8月29日 08:59</text>
								<text class="tn-color-grey">回复</text>
							</view>
							<view class="justify-content-item tn-text-sm tn-color-gray">
								<text class="tn-padding-xs">62</text>
								<text class="tn-icon-praise-simple"></text>
							</view>
						</view>




						<!-- 评论3-->
						<!-- 图标logo/头像 -->
						<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xl">
							<view class="justify-content-item">
								<view class="tn-flex tn-flex-col-center tn-flex-row-left">
									<view class="logo-pic">
										<view class="logo-image">
											<view class=""
												style="background-image:url('https://img2.baidu.com/it/u=821017625,3715366885&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');width: 60rpx;height: 60rpx;background-size: cover;">
											</view>
										</view>
									</view>
									<view class="tn-padding-right tn-padding-left-sm">
										<view class="tn-padding-right tn-text-df tn-flex tn-flex-col-center">
											<view class="justify-content-item tn-text-bold">
												抓住那只猪
											</view>
											<!-- <view class="justify-content-item tag-user tn-color-white" style="font-size: 16rpx;">
                        <text class="">作者</text>
                      </view> -->
										</view>
										<view class="tn-padding-right tn-text-ellipsis tn-text-xs tn-color-gray"
											style="padding-top: 5rpx;">
											高级产品经理
										</view>
									</view>
								</view>
							</view>
							<view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-color-gray">
								<view class="tn-text-center">
									<text class="tn-icon-more-vertical"></text>
								</view>
							</view>
						</view>

						<view class="" style="margin: 20rpx 30rpx 10rpx 80rpx;">
							吃瓜群众到此一游，阿巴阿巴
						</view>

						<view class="tn-flex tn-flex-row-between" style="margin: 0rpx 0rpx 30rpx 80rpx;">
							<view class="justify-content-item tn-text-sm tn-color-gray" style="padding-top: 5rpx;">
								<text class="tn-color-gray tn-padding-right">8月12日 12:12</text>
								<text class="tn-color-grey">回复</text>
							</view>
							<view class="justify-content-item tn-text-sm tn-color-gray">
								<text class="tn-padding-xs">28</text>
								<text class="tn-icon-praise-simple"></text>
							</view>
						</view>


						<!-- 评论4-->
						<!-- 图标logo/头像 -->
						<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xl">
							<view class="justify-content-item">
								<view class="tn-flex tn-flex-col-center tn-flex-row-left">
									<view class="logo-pic">
										<view class="logo-image">
											<view class=""
												style="background-image:url('https://img2.baidu.com/it/u=821017625,3715366885&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');width: 60rpx;height: 60rpx;background-size: cover;">
											</view>
										</view>
									</view>
									<view class="tn-padding-right tn-padding-left-sm">
										<view class="tn-padding-right tn-text-df tn-flex tn-flex-col-center">
											<view class="justify-content-item tn-text-bold">
												我们都是好孩子
											</view>
											<!-- <view class="justify-content-item tag-user tn-color-white" style="font-size: 16rpx;">
                        <text class="">作者</text>
                      </view> -->
										</view>
										<view class="tn-padding-right tn-text-ellipsis tn-text-xs tn-color-gray"
											style="padding-top: 5rpx;">
											高级项目经理
										</view>
									</view>
								</view>
							</view>
							<view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-color-gray">
								<view class="tn-text-center">
									<text class="tn-icon-more-vertical"></text>
								</view>
							</view>
						</view>

						<view class="" style="margin: 20rpx 30rpx 10rpx 80rpx;">
							我贼会滑-划水
						</view>

						<view class="tn-flex tn-flex-row-between" style="margin: 0rpx 0rpx 30rpx 80rpx;">
							<view class="justify-content-item tn-text-sm tn-color-gray" style="padding-top: 5rpx;">
								<text class="tn-color-gray tn-padding-right">8月12日 10:26</text>
								<text class="tn-color-grey">回复</text>
							</view>
							<view class="justify-content-item tn-text-sm tn-color-gray">
								<text class="tn-padding-xs">16</text>
								<text class="tn-icon-praise-simple"></text>
							</view>
						</view>

						<!-- 评论5-->
						<!-- 图标logo/头像 -->
						<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xl">
							<view class="justify-content-item">
								<view class="tn-flex tn-flex-col-center tn-flex-row-left">
									<view class="logo-pic">
										<view class="logo-image">
											<view class=""
												style="background-image:url('https://img2.baidu.com/it/u=821017625,3715366885&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');width: 60rpx;height: 60rpx;background-size: cover;">
											</view>
										</view>
									</view>
									<view class="tn-padding-right tn-padding-left-sm">
										<view class="tn-padding-right tn-text-df tn-flex tn-flex-col-center">
											<view class="justify-content-item tn-text-bold">
												可我会像
											</view>
											<!-- <view class="justify-content-item tag-user tn-color-white" style="font-size: 16rpx;">
                        <text class="">作者</text>
                      </view> -->
										</view>
										<view class="tn-padding-right tn-text-ellipsis tn-text-xs tn-color-gray"
											style="padding-top: 5rpx;">
											高级产品经理
										</view>
									</view>
								</view>
							</view>
							<view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-color-gray">
								<view class="tn-text-center">
									<text class="tn-icon-more-vertical"></text>
								</view>
							</view>
						</view>

						<view class="" style="margin: 20rpx 30rpx 10rpx 80rpx;">
							待你长发及腰
						</view>

						<view class="tn-flex tn-flex-row-between" style="margin: 0rpx 0rpx 30rpx 80rpx;">
							<view class="justify-content-item tn-text-sm tn-color-gray" style="padding-top: 5rpx;">
								<text class="tn-color-gray tn-padding-right">8月09日 18:06</text>
								<text class="tn-color-grey">回复</text>
							</view>
							<view class="justify-content-item tn-text-sm tn-color-gray">
								<text class="tn-padding-xs">19</text>
								<text class="tn-icon-praise-simple"></text>
							</view>
						</view>

					</view>

					<view class="tn-tabbar-height"></view>

				</scroll-view>

			</view>

			<!-- 评论输入压屏窗-->
			<tn-landscape :show="show" @close="closeLandscape" :closeBtn="false">
				<view class="chat-input" style="">
					<view class="tn-bg-gray--light tn-padding tn-text-justify"
						style="border-radius: 20rpx;margin: 40rpx 30rpx 30rpx 30rpx;">
						<textarea class="tn-input" maxlength="500" confirm-type="done" placeholder="输入聊天内容"
							placeholder-style="color:#AAAAAA" :show-confirm-bar="false" :focus="focusTextarea"
							@blur="closeLandscape"></textarea>
					</view>
					<view class="tn-flex tn-flex-row-right" style="width: 100vw;padding-right: 30rpx;"
						@tap.stop="closeLandscape">
						<tn-button backgroundColor="#4B98FE80" fontColor="#FFFFFF" padding="2rpx 30rpx 2rpx 30rpx"
							width="160rpx" fontSize="26">发 送</tn-button>
					</view>
					<view class="tn-tabbar-height-safe tn-color-white" style="opacity: 0;">
						预留安全区域
					</view>
				</view>

			</tn-landscape>

			<!-- 假的输入框-->
			<view class="tabbar footerfixed tn-bg-white">
				<view class="tn-flex tn-flex-row-between tn-flex-col-center">
					<view class="justify-content-item tn-margin-top" @tap="showLandscape">
						<view class="tn-margin-left"
							style="padding: 20rpx 40rpx;background-color: #F9F9F9;width: 76vw;border-radius: 1000rpx;color: #999999;">
							别把评论区，当作你的舒适区
						</view>
					</view>
					<view
						class="justify-content-item tn-flex-row-center tn-flex-col-center tn-margin-top tn-padding-right-sm">
						<view class="tn-flex tn-flex-row-center tn-flex-col-center">
							<!-- <view class="tn-flex tn-flex-row-center tn-flex-col-center tn-padding-right" @tap.stop="openMoreModal">
                <view class="tn-icon-emoji-good tn-color-gray" style="font-size: 60rpx;"></view>
              </view> -->
							<view class="avatar-all">
								<view class="tn-shadow-blur"
									style="background-image:url('https://img2.baidu.com/it/u=821017625,3715366885&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500');width: 60rpx;height: 60rpx;background-size: cover;">
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		options: {
			// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
			virtualHost: true
		},
		props: {
			value: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				openModal: false,

				/* 评论*/
				show: false,
				focusTextarea: false,
				maskCloseable: true,
			}
		},
		watch: {
			value: {
				handler(val) {
					this.openModal = val
				},
				immediate: true
			}
		},
		methods: {
			// 关闭弹框
			closeModal() {
				this.$emit('input', false)
			},

			// 弹出压屏窗
			showLandscape() {
				this.openLandscape()
			},
			// 打开压屏窗
			openLandscape() {
				this.show = true
				this.$nextTick(() => {
					this.focusTextarea = true
				})
			},
			// 关闭压屏窗，@blur 点击失去聚焦时，则相当于完成，关闭压屏窗并发送消息
			closeLandscape() {
				this.show = false
				this.focusTextarea = false
			},

			// 点击失去聚焦时，则相当于完成，关闭压屏窗并发送消息
			finish() {
				this.closeLandscape()
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 文字截取*/
	.clamp-text-1 {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.clamp-text-2 {
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.content-show {
		display: block;
	}

	.content-hide {
		display: none;
	}


	.wx-modal {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 99998 !important;

		view {
			box-sizing: border-box;
		}

		.image {
			width: 100%;
			height: 100%;
			border-radius: inherit;
		}

		.wam {
			z-index: 9999 !important;

			/* mask */
			&__mask {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				opacity: 0;
				animation: showMask 0.25s linear 0s forwards;
			}

			/* close-btn */
			&__close-btn {
				position: absolute;
				top: 40rpx;
				right: 30rpx;
				z-index: 679;
				font-size: 30rpx;
			}

			/* wrapper */
			&__wrapper {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				background-color: #FFFFFF;
				border-radius: 40rpx 40rpx 0rpx 0rpx;
				padding-top: 40rpx;
				// padding-bottom: 40rpx;
				// padding-bottom: calc(constant(safe-area-inset-bottom) + 40rpx);
				// padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
				transform-origin: center bottom;
				transform: scaleY(0);
				animation: showWrapper 0.25s linear 0s forwards;
				z-index: 99999;
			}

		}
	}

	@keyframes showMask {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes showWrapper {
		0% {
			transform: scaleY(0);
			opacity: 0;
		}

		100% {
			transform: scaleY(1);
			opacity: 1;
		}
	}

	/* 金刚区轮播 start */
	.card-swiper {
		height: 470rpx !important;
	}

	.card-swiper swiper-item {
		width: 750rpx !important;
		left: 0rpx;
		box-sizing: border-box;
		// padding: 0rpx 30rpx 90rpx 30rpx;
		overflow: initial;
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100%;
		transform: scale(1);
		transition: all 0.2s ease-in 0s;
		will-change: transform;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
		will-change: transform;
	}

	.card-swiper swiper-item .swiper-item-text {
		margin-top: -300rpx;
		text-align: center;
		width: 100%;
		display: block;
		height: 50%;
		border-radius: 10rpx;
		transform: translate(100rpx, 0rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item-text {
		margin-top: -300rpx;
		width: 100%;
		transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
	}

	.image-banner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-banner image {
		width: 100%;
		height: 100%;
	}

	/* 轮播指示点 start*/
	.indication {
		z-index: 9999;
		width: 100%;
		height: 36rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.spot {
		background-color: #000000;
		opacity: 0.1;
		width: 10rpx;
		height: 10rpx;
		border-radius: 20rpx;
		top: -70rpx;
		margin: 0 8rpx !important;
		position: relative;
	}

	.spot.active {
		opacity: 0.15;
		width: 30rpx;
		background-color: #000000;
	}

	.icon12 {
		&__item {
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 112rpx;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					background-size: 100% 100%;
				}
			}

		}
	}

	.icon28 {
		&__item {
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 80rpx;
				height: 80rpx;
				font-size: 46rpx;
				margin-bottom: 18rpx;
				position: relative;
				border-radius: 20rpx;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					background-size: 100% 100%;
					background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg4.png);
				}
			}

		}
	}

	.icon13 {
		&__item {
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 56rpx;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg4.png);

				}

			}

		}
	}

	/* 选中颜色*/
	.tn-color-select {
		color: #e83a30;
	}

	/* 头像 start */
	.logo-image {
		width: 60rpx;
		height: 60rpx;
		position: relative;
	}

	.logo-image-min {
		width: 40rpx;
		height: 40rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: center;
		// box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 100rpx;
		overflow: hidden;
		// background-color: #FFFFFF;
	}

	/* 作者标签 start*/
	.tag-user {
		display: inline-block;
		padding: 4rpx 8rpx;
		margin: 0 15rpx 0 10rpx;
		border-radius: 10rpx;
		background-color: #e83a30;
		font-size: 16rpx;
	}

	/* 底部 start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		background-color: rgba(255, 255, 255, 0.5);
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
	}

	.tabbar {
		align-items: center;
		min-height: 130rpx;
		padding: 0;
		height: calc(130rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom) / 2);
		padding-left: 5rpx;
		padding-right: 10rpx;
	}

	/* 间隔线 start*/
	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid #F8F7F8;
	}

	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F7F8;
	}

	/* 头像*/
	.avatar-all {
		width: 60rpx;
		height: 60rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.05);
		border-radius: 50%;
		overflow: hidden;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
	}

	.tn-input {
		width: calc(100vw - 120rpx);
		height: 120rpx;
	}

	.chat-input {
		z-index: 680;
		position: fixed;
		bottom: calc(2vh - 60rpx + env(safe-area-inset-bottom));
		border-radius: 24rpx 24rpx 0 0;
		background: linear-gradient(180deg, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF00);
	}

	/* 底部安全边距 start*/
	.tn-tabbar-height-safe {
		min-height: 160rpx;
		height: calc(180rpx + env(safe-area-inset-bottom));
		height: calc(180rpx + constant(safe-area-inset-bottom));
	}

	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom));
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}

	.tn-footerfixed {
		width: 100%;
		margin-top: 60rpx;
		margin-bottom: calc(env(safe-area-inset-bottom)- 20rpx);
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
	}

	/deep/.input-placeholder {
		font-size: 30rpx;
		color: #C6D1D8;
	}
</style>